<template>
   <div class="Back" >          
        <div class="Content overflow-auto" :style="contontStyle">

             <!-- 遮罩层 -->
             <slot name="maskLayer"></slot>

             <!-- 头部 -->
             <div class="head flex">
                <div></div>
                <!-- 标题 -->
                <div class="title overflow">{{title}}</div>
                <i class="el-icon-close close" @click="beforeClose"></i>
                
             </div>
             
             <!-- 身体 -->
             <div class="Body">
                  <slot name="content" class="slot_content overflow-auto"></slot>
             </div>

             <slot name="footer"></slot>
        </div>
   </div>
</template>
<script>
  export default 
  {
     name :'',
     props:{
        //标题
        title:{
            default:'自定义',
            required:false,
        },
        //关闭按钮
        showDown:{
            default:null,
            required:false,
        },
        //Style
        contontStyle:{
            default:null,
            required:false,
        }
     },
     computed:{
       getContentStyle(){
          return this.style
       }
     },
     methods: {
        beforeClose(){
            if(! this.showDown) return this.$message.warning('关闭事件未定义')
            this.showDown()
        }
     },
     mounted(){
        document.body.style.overflow = 'hidden'
     },
     beforeDestroy(){
        document.body.style.overflow = 'auto'
     }
  }
</script>
<style scoped lang='less'>
 /* 平板或手机 */
 @media screen and (max-width: 500px){

    div.head{
        justify-content: flex-start;
    }
 }

// 内容区
.Content{

    min-width: 350px;
    max-width: 90vw;
    width: 800px;

    height: 500px;
    min-height: 100px;
    max-height: 90vh;

    border-radius: 10px;

    background: var(--GeneralBackColor-half);

    overflow: auto;
    transition: 0.3s ease-in-out;
    position: relative;

}
//头部
.head{
    width: 100%;
    height: 50px;
    background: var(--GeneralBackColor);
    justify-content: center;
    padding: 0 20px;
    box-sizing: border-box;
    color: white;
    font-size: 20px;
    position: relative;
    
   
    //标题
    .title{
        max-width: calc(100% - 30px);
    }
    
    //关闭按钮
    .close{
        position: absolute;
        right: 10px;
        font-size: 25px;
        border-radius: 50%;
        padding: 2px;
        &:hover{
            background: rgba(0, 0, 0, 0.5);
        }
    }
}
//身体
.Body{
    width: 100%;
    height: calc(100% - 50px);
    overflow: auto;
    padding: 20px;
    box-sizing: border-box;
    position: relative;
}
//遮罩层
.maskLayer{
   width: 100%;
   height: 100%;
   position: absolute;
   left: 0;top: 0;
   z-index: 1000;
}
</style>